<template>
    <div class="mine">
      <div class="block">
        <div class="title">常用工具</div>
        <div class="list">
          <div class="btn">
            <van-icon name="location-o" size="24" />
            <span>我的地址</span>
          </div>
          <div class="btn">
            <van-icon name="phone-circle-o"  size="24"/>
            <span>我的客服</span>
          </div>
          <div class="btn" @click="toCollect"> 
            <van-icon name="like-o"  size="24"/>
            <span>店铺关注</span>
          </div>
          <div class="btn">
            <van-icon name="star-o"  size="24"/>
            <span>评价有礼</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    methods:{
      toCollect(){
        this.$router.push('/collect');
      }
    }
  }
  </script>
  
  <style lang='scss' scoped>
  .mine{
    background-color: #f5f5f5;
  }
  .block{
    margin: 10px;
    background-color: white;
    .title{
      font-weight: bold;
      padding-left: 10px;
    }
    .list{
      display: flex;
      justify-content: space-around;
      align-content: center;
      .btn{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        i{
          margin-bottom: 10px;
        }
      }
    }
  }
  </style>